<template>
    <div>
        <!-- 这里的首页头部, 其实并没有复用的必要 
        这里封装只是为了减少其他代码的干扰而已-->
        <HomeHeader />
        <!-- 这里的每个 tab 都是一个分类
        点击哪个分类的title 标签
        哪个分类的 内容部分 就会显示出来
        v-model 就是当前被激活内容这个分类的索引 -->
        <van-tabs v-model="activeIndex" sticky>
            <van-tab 
                :title="category.name"
                v-for="category in categoryList"
                :key="category.id"
            >
                <!-- 分类内容, 以后文章就是放到这里 -->
                <!-- 这里当前激活分类就是被遍历出来的 category
                文章就在里面的 category.postList -->

                <van-list
                    v-model="category.loading"
                    :finished="category.finished"
                   
                    :immediate-check="false"
                    finished-text="我是有底线的"
                    @load="loadMorePost"
                >
                    <PostItem
                        :postData="post"
                        v-for="post in category.postList"
                        :key="post.id"
                    />
                </van-list>
                
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
    import HomeHeader from "../components/HomeHeader";
    import PostItem from '../components/PostItem'
    export default {
        data() {
            return {
                activeIndex: localStorage.getItem('token')?1:0,
                categoryList: []
            }
        },
        components: {
            HomeHeader,
            PostItem
        },
        computed: {
            // 当前激活分类的获取方法, 直接封装成一个计算属性
            // 方便使用
            curCate() {
                // 当前激活分类, 应该就是
                // 从分类列表中, 取出当前激活索引
                return this.categoryList[this.activeIndex]
            }
        },
        watch: {
            activeIndex() {
                // 这里检测到分类切换, 加载新分类数据
                // 但是, 由于我们已经分栏目管理数据了
                // 所以如果发现新切换的栏目已经有文章, 不需要重新获取
                // 只有文章不存在时才过去

                // 如果点击的是最后一个分类加号 那么不加载数据而是跳转页面
                if (this.activeIndex == this.categoryList.length - 1) {
                    console.log("跳转管理页"); 
                    this.$router.push('/manage')
                }else {
                    if (this.curCate.postList.length == 0) {
                        this.loadPost()
                    }
                }
            }
        },
        created() {
            // 判断 当前本地储存有没有数据, 如果有就拿回来
            if (localStorage.getItem('active')) {
                let categories = JSON.parse(localStorage.getItem('active'))
                console.log('本地数据');
                console.log(categories);
                // 因为原来所有的远程数据都放在一个 res.data.data 里面
                // 如果想无缝衔接之前的逻辑, 可以自己构造这么一个对象
                let res = {
                    data:{
                        data: categories
                    }
                }

                this.categoryList = res.data.data.map(category=>{
                    return {
                        ...category,
                        postList: [],
                        pageSize: 5,
                        pageIndex: 1,
                        loading: false,
                        finished: false

                    }
                })

                this.categoryList.push({
                    name: "+"
                })

                console.log(this.categoryList);


                this.loadPost()
            }else {
                this.$axios({
                    url: '/category'
                }).then(res=>{
                    // 这里是获取到数据之后的一系列操作
                    // 其实, 无论数据是从远程服务器还是 localStorage 获取
                    // 操作都是一样
                    // 改变的只是 res 来源
                    console.log('远程数据');
                    console.log(res.data.data);
                    this.categoryList = res.data.data.map(category=>{
                        return {
                            ...category,
                            postList: [],
                            pageSize: 5,
                            pageIndex: 1,
                            loading: false,
                            finished: false

                        }
                    })

                    this.categoryList.push({
                        name: "+"
                    })

                    console.log(this.categoryList);


                    this.loadPost()
                })
            }
            
        },
        methods: {
            loadMorePost() {
                // 拉到底触发的加载更多函数
                // 将当前激活分类的页码 + 1
                this.curCate.pageIndex += 1
                // 加载数据
                this.loadPost()
            },
            loadPost() {
                this.$axios({
                    url: '/post',
                    params: {
                        category: this.curCate.id,
                        // 带上 pageIndex 可以做翻页,
                        // 带上 pageSize 可以限定当前页面的长度
                        pageSize: this.curCate.pageSize,
                        pageIndex: this.curCate.pageIndex
                    }
                }).then(res=>{
                    console.log(res.data);
                    // 这里拿到了当前激活分类的文章
                    // 之前已经改造过, 每个分类都有自己的数组
                    // 应该将文章数据放入到当前的激活分类 postList 当中

                    // 不再覆盖原来的文章, 而是将新文章接到也来的数组后面
                    this.curCate.postList = [
                        ...this.curCate.postList,
                        ...res.data.data
                    ]

                    // 拼接完数据, 告诉组件我已经处理完数据了
                    this.curCate.loading = false

                    // 如果所有数据已经获取完毕
                    // 需要将 finished 改为 true
                    if (res.data.data.length < this.curCate.pageSize) {
                        this.curCate.finished = true;
                    }
                })
            }
        }
    };
</script>

<style lang="less" scoped>
// 在 scoped 的情况下, 如果想要有例外的样式影响子组件内部
// 使用 /deep/ 标记, 放在选择器之前即可
/deep/ .van-tab__text {
    color: pink;
}

/deep/ .van-tab:nth-last-child(2){
    background-color: #fff;
    position: sticky;
    right: -8px;
    line-height: 44px;
    width: 44px;
    font-size: 18/360*100vw;
    font-weight: 700;
}
</style>